<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="static/easyui/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="static/easyui/themes/icon.css">
<link rel="stylesheet" href="static/css/style.css" />
<link rel="stylesheet" href="static/css/tcommon.css" />
<script src="static/jquery/jquery-1.12.4.js"></script>
<script src="static/easyui/jquery.easyui.min.js"></script>
<script src="static/easyui/locale/easyui-lang-zh_CN.js"></script>
<title>个人信息</title>
</head>

	<body class="easyui-layout">
		<div class="easyui-panel" title="个人信息" style="width:100%; margin: 0 auto;">
			<div style="padding:10px 60px 20px 60px">
				<form id="ff" method="post">
					<table cellpadding="5" style="margin: auto;">
						<tr>
							<td>姓名:</td>
							<td>
								<input class="easyui-textbox" type="text" id="name" name="name" data-options="required:true" th:value="${session.userInfo.name}"></input>
							</td>
						</tr>
						<tr>
							<td>密码:</td>
							<td>
								<a href="#" class="d-btn btn-green" onclick="resetPwd()">修改密码</a>
							</td>
						</tr>
						<tr>
							<td>性别:</td>
							<td>
								<select class="easyui-combobox" id="sex" name="sex" style="width: 100%;" data-options="required:true, editable:false,panelHeight: 'auto'">
									<option value="男">男</option>
									<option value="女">女</option>
								</select>
							</td>
						</tr>
						<tr>
							<td>手机号码:</td>
							<td>
								<input type="text" class="easyui-textbox" id="mobile" name="mobile" 
								data-options="validType:['mobilevalidate','phoneNum']" style="width: 200px;" /></td>
							</td>
						</tr>
					</table>
				</form>
				<div style="text-align:center;margin-top:30px;">
					<a href="#" class="d-btn btn-blue" onclick="save()">保存</a>
				</div>
			</div>
		</div>

		<div id="resetPwdDlg" class="easyui-dialog info_dialog" style="width: 400px; padding: 10px 20px" closed="true" buttons="#parent-dlg-buttons">
			<div class="title">重置密码</div>
			<form id="resetPwdFm" method="post">
				<div class="content_container">
					<table class="content_table">
						<tr>
							<td style="width: 120px;">旧密码：</td>
							<td><input type="password" class="easyui-textbox" data-options="validType:{length: [1, 15]}" id="oldPwd" name="oldPwd" required="true" style="width: 100%;" /></td>
						</tr>
						<tr>
							<td style="width: 100px;">新密码：</td>
							<td><input type="password" class="easyui-textbox" id="newPwd" style="width: 100%;" data-options="validType:{length: [1, 15]},required:true" name="newPwd" /></td>
						</tr>
						<tr>
							<td style="width: 100px;">重复密码：</td>
							<td>
								<input type="password" class="easyui-textbox" validType="equals['#newPwd']" data-options="validType:{length: [1, 15]},required:true" id="repeatPwd" style="width: 100%;" name="repeatPwd"  />
							</td>
						</tr>
					</table>
				</div>
			</form>
		</div>
		<div id="parent-dlg-buttons">
			<a href="# " class="easyui-linkbutton " onclick="savePwd()">保存</a>
		</div>
	</body>

	<script th:inline="javascript">
	var user;
	var userid = [[${session.userInfo.id}]];
		$(document).ready(function() {
			loginedNodeId = userid;
			$.ajax({
				type: 'GET',
				url: 'userInfo.do',
				data: {
					userid: userid
				},
				success: function(data) {
					user=data;
					setupView();
				},
				dataType: "json"
			});
		});

		function setupView() {
			$("#name").textbox('setValue', user.name);
			$("#sex").combobox('setValue', user.sex);
			$("#mobile").textbox('setValue', user.mobile);
		}

		function save() {
			if(!$("#ff").form('validate'))
				return;
			user.name = $("#name").textbox('getValue');
			user.sex = $("#sex").combobox('getValue');
			user.mobile = $("#mobile").textbox('getValue');
			$.ajax({
				type: 'POST',
				url: 'userSave.do',
				data: JSON.stringify(user),
				contentType: "application/json",
				success: function(data) {
					if(data.success) {
						$.messager.show({
							title: '保存',
							msg: '保存成功',
							timeout: 5000,
							showType: 'slide'
						});
					} else {
						$.messager.alert('保存', '保存失败', 'error');
					}
				},
				dataType: "json"
			});
		}

		function resetPwd() {
			$("#resetPwdDlg").dialog('open').dialog('setTitle', '重置密码');
		}

		function savePwd() {
			if(!$("#resetPwdFm").form('validate'))
				return;
			var newPwd = $("#newPwd").textbox('getValue');
			var oldPwd = $("#oldPwd").textbox('getValue');
			var repeatPwd = $("#repeatPwd").textbox('getValue');
			if(newPwd != repeatPwd) {
				$.messager.alert('更新密码', '两次密码输入不一致', 'warning');
				return;
			}
			$.ajax({
				type: 'POST',
				url: 'editPwd.do',
				data: {
					userid: userid,
					oldPwd: oldPwd,
					newPwd: newPwd
				},
				success: function(data) {
					if(data.success) {
						$.messager.show({
							title: '重置密码',
							msg: '重置密码成功',
							timeout: 5000,
							showType: 'slide'
						});
						$("#resetPwdDlg").dialog('close');
					} else {
						$.messager.alert('重置密码', '重置密码失败 ' + data.errMsg, 'error');
					}
				},
				dataType: "json"
			});
		}
		
		
		$.extend($.fn.validatebox.defaults.rules, {  
			phoneNum : { //验证手机号   
				validator : function(value, param) {
					return /^1[3-9]+\d{9}$/.test(value);
				},
				message : '请输入正确的手机号码。'
			},  
		    mobilevalidate : {
		    	validator : function(value, param) {
			    	var userinfo = {};
			    	userinfo.mobile = value.trim();
			    	userinfo.id = user.id;
		    		var res = false;
		    		$.ajax({
						type: 'POST',
						async : false,
						url: 'check/mobile',
						data: userinfo,
						success: function(data) {
							res= data.success;
						},
						dataType: "json"
					});
					return res;
		        },
		        message : '手机号已注册'
		    }
		});
		
		function formatDate(time){
		    var date = new Date(time);

		    var year = date.getFullYear(),
		        month = date.getMonth() + 1,//月份是从0开始的
		        day = date.getDate(),
		        hour = date.getHours(),
		        min = date.getMinutes(),
		        sec = date.getSeconds();
		    var newTime = year + '-' +
		                month + '-' +
		                day;
		    return newTime;         
		}
	</script>

</html>